<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
      position: relative;
    }
    #overlay {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(200, 200, 255);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.5s ease-in-out;
    }
    #audioControl {
      z-index: 0;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      transition: opacity 0.5s ease;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
    #audioControl.paused {
      opacity: 0.5;
    }
    #grayOverlay {
      z-index: 2;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(225, 225, 225);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <div id="grayOverlay">Tap somewhere</div>
  <div id="overlay">Click to start</div>

  <button id="audioControl">暂停</button>

  <audio id="backgroundAudio" loop>
    <source src="File/audio/bgm_full.mp3" type="audio/mpeg">
    <source src="File/audio/bgm_loop.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>
  <audio id="sound_effect">
    <source src="File/audio/shutter_close.mp3" type="audio/mpeg">
    <source src="File/audio/shutter_open.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>

  <script>
    const bgm_start = document.querySelector('#backgroundAudio');
    const controlButton = document.querySelector('#audioControl');
    const overlay = document.querySelector('#overlay');
    const grayOverlay = document.querySelector('#grayOverlay');
    bgm_start.volume = 0;  // 初始音量为0

    // 音量渐变
    function fadeAudio(toVolume, duration) {
      let startVolume = bgm_start.volume;
      let change = toVolume - startVolume;
      let startTime = Date.now();
      let fadeInterval = setInterval(() => {
        let currentTime = Date.now();
        let timeElapsed = currentTime - startTime;
        let newVolume = startVolume + (change * (timeElapsed / duration));
        if (timeElapsed > duration) {
          newVolume = toVolume;
          clearInterval(fadeInterval);
        }
        bgm_start.volume = newVolume;
      }, 10);
    }

    // 暂停按钮
    controlButton.addEventListener('click', () => {
      if (bgm_start.paused) {
        bgm_start.play().then(() => {
          fadeAudio(1, 1000); // 淡入1秒
        }).catch(error => {
          console.error('播放被阻止:', error);
        });
        controlButton.textContent = '暂停';
        controlButton.classList.remove('paused');
      } else {
        fadeAudio(0, 1000); // 淡出1秒
        setTimeout(() => {
          bgm_start.pause();
        }, 1000);
        controlButton.textContent = '继续';
        controlButton.classList.add('paused');
      }
    });
    // 监听音频状态更新暂停按钮样式
    bgm_start.addEventListener('play', () => {
      controlButton.classList.remove('paused');
    });
    bgm_start.addEventListener('pause', () => {
      controlButton.classList.add('paused');
    });

    // 生成随机缓冲
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    const randomInt = getRandomInt(4000, 8000);
    console.log(randomInt)
    // 淡紫色块点击事件
    overlay.addEventListener('click', () => {
      overlay.textContent = "Please wait.."
        setTimeout(() => {
            bgm_start.play().then(() => {
            bgm_start.volume = 1; // 立即设置音量为1
          }).catch(error => {
            console.error('播放被阻止:', error);
          });
          setTimeout(() => {
            overlay.style.transform = 'translateY(-100%)';
            setTimeout(() => {
              overlay.remove();
              overlay.remove();
            }, 1000); // 与CSS的transition时间一致
          }, 200)
        }, randomInt) // 随机缓冲时间
    });
    // 淡灰色块点击事件
    grayOverlay.addEventListener('click', () => {
      bgm_start.currentTime = 0; // 确保音频从头开始播放
      bgm_start.play().then(() => {
        setTimeout(() => {
          bgm_start.pause();
          grayOverlay.style.transform = 'translateX(-100%)';
          grayOverlay.addEventListener('transitionend', () => {
            grayOverlay.remove();
          });
        }, 4); // 4ms后暂停
      }).catch(error => {
        console.error('播放被阻止:', error);
      });
    });

  </script>
</body>
</html>